<template>
  <div class="login" v-wechat-title="title">
    <div class="title">登录 <span class="title_huang"></span></div>
    <p>欢迎登陆搜城商铺网，无需注册，一键登录!</p>
    <div class="login_phone">
      <input type="text" v-model="mobile" maxlength="13" @input="tel()" placeholder="请输入手机号">
    </div>
    <div class="login_verification">
      <input type="text" maxlength="6" @input="code()" v-model="captcha" placeholder="请输入验证码">
      <div @click="postsendcode()" :class="{disabled:disabled}">
        <template v-if="sending">获取验证码</template>
        <template v-else>{{second}}秒后重发</template>
      </div>
    </div>
    <div class="login_button" :class="{login_state:login_state}" @click="postcode()">登录</div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'login',
  data () {
    return {
      title: '登录',
      mobile: '',
      captcha: '',
      telephone_to_blank: '',
      disabled: false,
      second: 60,
      sending: true,
      login_state: false
    }
  },
  methods: {
    ...mapMutations(['changeLogin']),
    ...mapMutations(['changeUName']),
    ...mapMutations(['changeUid']),
    ...mapMutations(['changeUavatar']),
    code () {
      if (this.disabled) {
        if (this.captcha.length === 6) {
          this.login_state = true
        } else {
          this.login_state = false
        }
      }
    },
    tel () {
      if (this.mobile.length === 11) {
        if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {
          this.$toast('请输入正确的手机号')
          setTimeout(() => {
            this.mobile = ''
          }, 800)
        } else {
          this.disabled = true
        }
      }
    },
    postsendcode () {
      if (!this.disabled) {
        this.$toast('请输入正确的手机号')
      } else if (!this.sending) {
        this.$toast('请勿重复发送')
      } else {
        this.$axios.get(process.env.API_HOST + '/api/sms/send', {
          params: {
            mobile: this.mobile
          }
        }).then(this.postListSucc)
          .catch(error => console.log(error))
        this.sending = false
        this.timeDown()
      }
    },
    postsendcodeSucc (res) {
      if (res.data.code === 1) {
        this.$toast('发送成功')
      }
    },
    timeDown () {
      let result = setInterval(() => {
        --this.second
        if (this.second < 0) {
          clearInterval(result)
          this.sending = true
          this.second = 60
        }
      }, 1000)
    },
    postcode () {
      if (this.login_state) {
        const formData = new FormData()
        formData.append('mobile', this.mobile)
        formData.append('captcha', this.captcha)
        this.$axios.post(process.env.API_HOST + '/api/user/mobilelogin', formData
        ).then(this.postcodeSucc)
          .catch(error => console.log(error))
      }
    },
    postcodeSucc (res) {
      let that = this
      if (res.data.code === 1) {
        this.$toast('登录成功')
        let userinfo = res.data.data.userinfo
        that.changeLogin({ token: userinfo.token })
        if (userinfo.username !== '') {
          that.changeUName({ name: userinfo.username })
        } else if (userinfo.nickname !== '') {
          that.changeUName({ name: userinfo.nickname })
        } else {
          that.changeUName({ name: userinfo.mobile })
        }
        that.changeUid({ id: userinfo.id })
        that.changeUavatar({ avatar: userinfo.avatar })
        setTimeout(function () {
          that.$router.push('/')
        }, 1500)
      } else {
        this.$toast(res.data.msg)
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.login
  padding-top 1.62rem /* 81/50 */
  padding-left .72rem /* 36/50 */
  padding-right .72rem
  .title
    font-size .54rem /* 27/50 */
    color #333
    font-weight bold
    position relative
    height .5rem /* 25/50 */
    margin-bottom .28rem /* 14/50 */
    .title_huang
      position absolute
      width 1.08rem /* 54/50 */
      height .06rem /* 3/50 */
      background linear-gradient(90deg, #F14510, #EE340F)
      box-shadow 1px 1px 5px 0px rgba(255, 1, 1, 0.42)
      bottom 0px
      left 0px
      z-index -1
  p
    color #F6360A
    font-size .26rem /* 13/50 */
  .login_phone
    margin-top 1.7rem /* 85/50 */
    height .98rem /* 44/50 */
    line-height .98rem /* 44/50 */
    border-bottom 1px solid #999
    box-sizing border-box
    margin-bottom .86rem /* 43/50 */
    input
      width 100%
      height .88rem
      line-height .88rem
      padding .3rem /* 15/50 */ .12rem /* 6/50 */
  .login_verification
    display flex
    height .98rem
    line-height .98rem
    border-bottom 1px solid #999
    input
      width 70%
      padding .3rem /* 15/50 */ .12rem /* 6/50 */
    div
      width 30%
      height .56rem /* 28/50 */
      line-height .56rem /* 28/50 */
      border-radius .28rem /* 14/50 */
      font-size .3rem /* 15/50 */
      text-align center
      color #999
      margin-top .16rem /* 8/50 */
      background-color #f4f4f4
    .disabled
      color #fff
      background linear-gradient(90deg, #F14510, #EE340F)
      box-shadow 1px 1px 5px 0px rgba(255, 1, 1, 0.42)
  .login_button
    width 5.52rem /* 276/50 */
    height .88rem /* 44/50 */
    line-height .88rem /* 44/50 */
    border-radius .44rem /* 22/50 */
    font-size .4rem /* 20/50 */
    background-color #f4f4f4
    color #999
    text-align center
    margin-left .66rem /* 33/50 */
    margin-top 1.5rem /* 55/50 */
  .login_state
    color #fff
    background linear-gradient(90deg, #F14510, #EE340F)
    box-shadow 1px 1px 5px 0px rgba(255, 1, 1, 0.42)
</style>
